<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>李秀如的简历 | 作品集</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 添加这行代码来引入Font Awesome图标库 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#7C3AED', // 主色调：紫色
            secondary: '#EC4899', // 辅助色：粉色
            dark: '#0F172A', // 深色背景
            light: '#F8FAFC', // 浅色文本
            accent: '#3B82F6', // 强调色：蓝色
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.3);
      }
    }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-dark text-light font-inter min-h-screen">
  <!-- 导航栏 -->
  <nav class="sticky top-0 z-50 bg-dark/80 backdrop-blur-md border-b border-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <a href="#" class="flex items-center space-x-2">
            <div
              class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
              <span class="text-white font-bold">LX</span>
            </div>
            <span class="font-semibold text-xl">李秀如</span>
          </a>
        </div>
        <div class="flex items-center space-x-6">
          <a href="#about" class="text-gray-300 hover:text-primary transition-colors">关于我</a>
          <a href="#skills" class="text-gray-300 hover:text-primary transition-colors">技能</a>
          <a href="#projects" class="text-gray-300 hover:text-primary transition-colors">作品集</a>
          <a href="#education" class="text-gray-300 hover:text-primary transition-colors">教育经历</a>
          <a href="#contact" class="text-gray-300 hover:text-primary transition-colors">联系方式</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- 个人信息 -->
    <section id="about" class="mb-20">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div
          class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center overflow-hidden">
          <img src="images/mypicture.png" alt="个人照片" class="w-full h-full object-cover mix-blend-lighten">
        </div>
        <div class="text-center md:text-left">
          <h1
            class="text-[clamp(2rem,5vw,3.5rem)] font-bold bg-gradient-to-r from-primary to-secondary text-gradient mb-4">
            李秀如</h1>
          <p class="text-xl text-gray-300 mb-2">数字媒体技术专业 · 大四学生</p>
          <p class="text-gray-400 max-w-2xl mb-6">
            热爱游戏开发与数字艺术创作，具备扎实的技术基础与创新思维。擅长Unity、Unreal Engine等游戏引擎开发，同时精通平面设计、视频剪辑与3D动画制作，致力于创造富有沉浸感的数字体验。
          </p>
          <div class="flex flex-wrap justify-center md:justify-start gap-4">
            <a href="#projects"
              class="px-6 py-2 bg-gradient-to-r from-primary to-secondary rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center">
              <i class="fa fa-folder-open mr-2"></i> 查看作品集
            </a>
            <a href="#contact"
              class="px-6 py-2 bg-gray-800 border border-gray-700 rounded-lg font-medium hover:bg-gray-700 transition-colors flex items-center">
              <i class="fa fa-envelope mr-2"></i> 联系我
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 技能部分 -->
    <section id="skills" class="mb-20">
      <h2 class="text-2xl font-bold mb-8 bg-gradient-to-r from-primary to-secondary text-gradient inline-block">专业技能
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 技术技能 -->
        <div class="bg-gray-800/50 rounded-xl p-6">
          <h3 class="text-xl font-semibold mb-4 text-primary flex items-center">
            <i class="fa fa-code mr-2"></i> 技术能力
          </h3>

          <div class="mb-4">
            <h4 class="text-lg font-medium text-gray-300 mb-2">编程语言</h4>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">C#</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Python</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Java</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">JavaScript</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">HTML/CSS基础</span>
            </div>
          </div>

          <div class="mb-4">
            <h4 class="text-lg font-medium text-gray-300 mb-2">开发工具</h4>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Unity3D</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Unreal Engine 5</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Visual Studio</span>
            </div>
          </div>

          <div class="mb-4">
            <h4 class="text-lg font-medium text-gray-300 mb-2">设计软件</h4>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Adobe全家桶</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">PS</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">AE</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">An</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">AI</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">3ds MAX</span>
            </div>
          </div>

          <div>
            <h4 class="text-lg font-medium text-gray-300 mb-2">其他技术</h4>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">AR/VR开发</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">计算机视觉(OpenCV)</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">基础算法与数据结构</span>
              <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">AIGC应用</span>
            </div>
          </div>
        </div>

        <!-- 设计与软技能 -->
        <div class="bg-gray-800/50 rounded-xl p-6">
          <h3 class="text-xl font-semibold mb-4 text-secondary flex items-center">
            <i class="fa fa-paint-brush mr-2"></i> 设计能力
          </h3>

          <div class="mb-6">
            <div class="flex flex-wrap gap-2 mb-4">
              <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">3D建模与动画制作</span>
              <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">影视后期合成</span>
              <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">UI/UX设计</span>
            </div>
            <p class="text-gray-400 text-sm">
              熟悉用户交互逻辑，能独立完成原型设计与用户测试，具备良好的审美能力和设计思维。
            </p>
          </div>

          <h3 class="text-xl font-semibold mb-4 text-accent flex items-center">
            <i class="fa fa-users mr-2"></i> 软技能
          </h3>

          <div class="mb-4">
            <div class="flex flex-wrap gap-2 mb-4">
              <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">跨团队协作</span>
              <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">快速学习能力</span>
              <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">文档撰写与汇报</span>
              <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">英语水平：CET-4</span>
            </div>
            <p class="text-gray-400 text-sm">
              熟悉用户交互逻辑，能独立完成原型设计与用户测试，具备良好的审美能力和设计思维。<!-- 需要修改 -->
            </p>
          </div>
        </div>
      </div>

      <!-- 技能图表 -->
      <div class="mt-8 bg-gray-800/50 rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-6 text-accent flex items-center">
          <i class="fa fa-bar-chart mr-2"></i> 技能熟练度
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 编程技能 -->
          <div>
            <h4 class="text-lg font-medium text-gray-300 mb-3">编程技能</h4>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">C#</span>
                  <span class="text-gray-400 text-sm">90%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-primary to-secondary h-2 rounded-full" style="width: 90%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">Python</span>
                  <span class="text-gray-400 text-sm">85%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-primary to-secondary h-2 rounded-full" style="width: 85%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">Java</span>
                  <span class="text-gray-400 text-sm">80%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-primary to-secondary h-2 rounded-full" style="width: 80%"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 开发工具 -->
          <div>
            <h4 class="text-lg font-medium text-gray-300 mb-3">开发工具</h4>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">Unity3D</span>
                  <span class="text-gray-400 text-sm">95%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-secondary to-accent h-2 rounded-full" style="width: 95%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">Unreal Engine 5</span>
                  <span class="text-gray-400 text-sm">85%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-secondary to-accent h-2 rounded-full" style="width: 85%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">Visual Studio</span>
                  <span class="text-gray-400 text-sm">90%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-secondary to-accent h-2 rounded-full" style="width: 90%"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 设计技能 -->
          <div>
            <h4 class="text-lg font-medium text-gray-300 mb-3">设计技能</h4>
            <div class="space-y-3">
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">3D建模与动画</span>
                  <span class="text-gray-400 text-sm">85%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-accent to-primary h-2 rounded-full" style="width: 85%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">影视后期合成</span>
                  <span class="text-gray-400 text-sm">90%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-accent to-primary h-2 rounded-full" style="width: 90%"></div>
                </div>
              </div>
              <div>
                <div class="flex justify-between mb-1">
                  <span class="text-gray-400 text-sm">UI/UX设计</span>
                  <span class="text-gray-400 text-sm">80%</span>
                </div>
                <div class="w-full bg-gray-700 rounded-full h-2">
                  <div class="bg-gradient-to-r from-accent to-primary h-2 rounded-full" style="width: 80%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 作品集 -->
    <section id="projects" class="mb-20">
      <h2 class="text-2xl font-bold mb-8 bg-gradient-to-r from-primary to-secondary text-gradient inline-block">作品集</h2>
      <p class="text-gray-400 mb-8 max-w-3xl">
        以下是我在数字媒体领域的实践成果，涵盖游戏开发、视觉设计、动画制作等方向。
      </p>
      <p class="text-gray-400 mb-8 max-w-3xl">
        目前只添加了Unity相关的部分项目，其余项目之后会放上去，敬请期待。
      </p>
      <p class="text-gray-400 mb-8 max-w-3xl">
        每个分类可横向滑动查看更多项目，点击「查看详情」可了解作品的技术细节与创作思路。
      </p>

      <!-- Unity项目 -->
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-primary flex items-center">
          <i class="fa fa-gamepad mr-2"></i> Unity项目
        </h3>

        <div class="relative">
          <!-- 横向滚动容器 -->
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!-- 项目1 UnityVR  -->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="images/U-HZYSfm.png" alt="活字印刷展览馆"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《活字印刷展览馆》</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款虚拟现实太空探索体验，支持Oculus Quest和HTC Vive设备。
                  </p>
                  <a href="https://rmlxh.github.io/Unity2D-NCF.github.io/"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!-- 项目2 UnityAR -->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="images/U-FDBCfm.jpg" alt="福鼎白茶"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《星际漫游》VR太空体验</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款基于增强现实技术的教育应用，让学习变得更加互动和有趣。
                  </p>
                  <a href="project-detail.html?project=unity-2"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!-- 项目3 Unity3D -->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="images/U-TMfm.png" alt="3D迷宫解谜游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《光影之间》2D平台跳跃游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款以光影变换为核心机制的2D平台跳跃游戏。
                  </p>
                  <a href="project-detail.html?project=unity-3"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!-- 项目4 Unity2D -->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="images/U-NCFfm.png" alt="2D冒险解谜游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《九章幻境》</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款2D第三人称冒险解谜游戏，玩家需要探索幻境，解开九章算术的谜题。
                  </p>
                  <a href="project-detail.html?project=unity-4"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!-- 项目5 UnitySY
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1018/600/400" alt="2D平台跳跃游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《光影之间》2D平台跳跃游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款以光影变换为核心机制的2D平台跳跃游戏。
                  </p>
                  <a href="project-detail.html?project=unity-3"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div> -->

          <!-- 滚动提示 -->
          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <!-- 
      <! -- Unreal Engine项目 -- >
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-secondary flex items-center">
          <i class="fa fa-rocket mr-2"></i> Unreal Engine项目
        </h3>

        <div class="relative">
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!- - 项目1 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1019/600/400" alt="开放世界RPG"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《龙与魔法》开放世界RPG</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款基于虚幻引擎5的开放世界角色扮演游戏。
                  </p>
                  <a href="project-detail.html?project=ue-1"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目2 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1039/600/400" alt="赛车游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《极速狂飙》赛车游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款高速赛车游戏，具有真实的物理模拟和动态赛道变化。
                  </p>
                  <a href="project-detail.html?project=ue-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目3 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1039/600/400" alt="赛车游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《极速狂飙》赛车游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款高速赛车游戏，具有真实的物理模拟和动态赛道变化。
                  </p>
                  <a href="project-detail.html?project=ue-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目4 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1039/600/400" alt="赛车游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《极速狂飙》赛车游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款高速赛车游戏，具有真实的物理模拟和动态赛道变化。
                  </p>
                  <a href="project-detail.html?project=ue-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目5 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1039/600/400" alt="赛车游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《极速狂飙》赛车游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款高速赛车游戏，具有真实的物理模拟和动态赛道变化。
                  </p>
                  <a href="project-detail.html?project=ue-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目6  - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1039/600/400" alt="赛车游戏"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《极速狂飙》赛车游戏</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    一款高速赛车游戏，具有真实的物理模拟和动态赛道变化。
                  </p>
                  <a href="project-detail.html?project=ue-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div> 
      -->

      <!--
      <!- - 平面设计项目 - ->
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-accent flex items-center">
          <i class="fa fa-picture-o mr-2"></i> 平面设计项目
        </h3>

        <div class="relative">
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!- - 项目1 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1040/600/400" alt="音乐节海报"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《未来之声》音乐节海报设计</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    为校园音乐节设计的系列海报，采用未来主义风格，结合霓虹色彩和几何元素。
                  </p>
                  <a href="project-detail.html?project=graphic-1"
                    class="text-accent hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目2 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1042/600/400" alt="品牌VI设计"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《绿意生活》环保品牌VI设计</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    为环保组织设计的品牌视觉识别系统，包括标志、色彩系统、字体规范和应用场景。
                  </p>
                  <a href="project-detail.html?project=graphic-2"
                    class="text-accent hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目3 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1043/600/400" alt="书籍封面设计"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《数字时代》书籍封面设计</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    为科技类书籍设计的封面，采用简约现代风格，结合抽象几何图形和渐变色彩。
                  </p>
                  <a href="project-detail.html?project=graphic-3"
                    class="text-accent hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <!- - 视频剪辑项目 - ->
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-primary flex items-center">
          <i class="fa fa-video-camera mr-2"></i> 视频剪辑项目
        </h3>

        <div class="relative">
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!- - 项目1 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1050/600/400" alt="旅行纪录片"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《在路上》旅行纪录片</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    记录西南地区骑行之旅的纪录片，采用电影级调色和多机位剪辑。
                  </p>
                  <a href="project-detail.html?project=video-1"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目2 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1052/600/400" alt="产品宣传片"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《未来科技》产品宣传片</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    为智能手表产品制作的宣传片，结合3D动画和实景拍摄。
                  </p>
                  <a href="project-detail.html?project=video-2"
                    class="text-primary hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>
       -->

      <!--
      <!- - 3D动画项目 - ->
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-secondary flex items-center">
          <i class="fa fa-film mr-2"></i> 3D动画项目
        </h3>

        <div class="relative">
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!- - 项目1 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1060/600/400" alt="角色动画"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《机器人冒险》角色动画短片</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    讲述一个小机器人寻找自我的动画短片，使用Blender制作。
                  </p>
                  <a href="project-detail.html?project=3d-1"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目2 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1061/600/400" alt="产品可视化"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《智能家居》产品可视化</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    为智能家居系统制作的3D可视化动画，展示产品的外观设计和工作原理。
                  </p>
                  <a href="project-detail.html?project=3d-2"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目3 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1062/600/400" alt="环境特效"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《奇幻森林》环境特效短片</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    展现神秘森林中魔法生物的3D短片，重点展示粒子特效和动态光照效果。
                  </p>
                  <a href="project-detail.html?project=3d-3"
                    class="text-secondary hover:text-primary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>
       -->

      <!--
      <!- - AIGC项目 - ->
      <div class="mb-12">
        <h3 class="text-xl font-semibold mb-6 text-accent flex items-center">
          <i class="fa fa-magic mr-2"></i> AIGC项目
        </h3>

        <div class="relative">
          <div class="overflow-x-auto pb-4 scrollbar-hide">
            <div class="flex space-x-6 min-w-max">
              <!- - 项目1 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1070/600/400" alt="AI艺术作品"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《梦境世界》AI艺术作品集</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    使用Midjourney和Stable Diffusion创作的超现实艺术作品系列。
                  </p>
                  <a href="project-detail.html?project=aigc-1"
                    class="text-accent hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>

              <!- - 项目2 - ->
              <div class="w-72 bg-gray-800/50 rounded-xl overflow-hidden card-hover">
                <div class="h-48 overflow-hidden">
                  <img src="https://picsum.photos/id/1071/600/400" alt="AI辅助设计"
                    class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
                </div>
                <div class="p-5">
                  <h4 class="text-lg font-semibold mb-2">《未来城市》AI辅助概念设计</h4>
                  <p class="text-gray-400 text-sm mb-4">
                    结合AI工具进行未来城市概念设计，通过ChatGPT生成创意，Midjourney生成图像。
                  </p>
                  <a href="project-detail.html?project=aigc-2"
                    class="text-accent hover:text-secondary transition-colors text-sm font-medium flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div
            class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-dark/80 p-2 rounded-full text-gray-400 hidden md:block">
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>
       -->
    </section>

    <!-- 教育经历 -->
    <section id="education" class="mb-20">
      <h2 class="text-2xl font-bold mb-8 bg-gradient-to-r from-primary to-secondary text-gradient inline-block">教育经历
      </h2>

      <div class="bg-gray-800/50 rounded-xl p-6">
        <!-- 核心课程 -->
        <div class="mb-8">
          <h3 class="text-xl font-semibold mb-4 text-primary flex items-center">
            <i class="fa fa-book mr-2"></i> 核心课程
          </h3>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 游戏开发技术 -->
            <div>
              <h4 class="text-lg font-medium text-gray-300 mb-2">游戏开发技术</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Unity 3D基础</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">VR/AR开发</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">UE5游戏程序设计</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">计算机游戏程序设计</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">UE项目开发</span>
              </div>
            </div>

            <!-- 编程与算法 -->
            <div>
              <h4 class="text-lg font-medium text-gray-300 mb-2">编程与算法</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">C/C++</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">C#</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Python</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Java</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">数据结构</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">操作系统</span>
                <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">计算机网络</span>
              </div>
            </div>

            <!-- 设计与交互 -->
            <div>
              <h4 class="text-lg font-medium text-gray-300 mb-2">设计与交互</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">3D建模(3ds MAX)</span>
                <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">计算机动画(An)</span>
                <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">平面设计(PS/Ai)</span>
                <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">影视剪辑(Ae)</span>
                <span class="px-3 py-1 bg-secondary/20 text-secondary rounded-full text-sm">人机交互技术</span>
              </div>
            </div>

            <!-- 扩展技术 -->
            <div>
              <h4 class="text-lg font-medium text-gray-300 mb-2">扩展技术</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">数据库原理</span>
                <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">Web应用开发</span>
                <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">图形图像处理(OpenCV)</span>
                <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">AIGC</span>
                <span class="px-3 py-1 bg-accent/20 text-accent rounded-full text-sm">3ds MAX 动画制作</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 学生工作 -->
        <div class="mb-8">
          <h3 class="text-xl font-semibold mb-4 text-secondary flex items-center">
            <i class="fa fa-users mr-2"></i> 学生工作
          </h3>

          <div class="bg-gray-700/50 rounded-lg p-4">
            <div class="flex items-start">
              <div
                class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
                <i class="fa fa-briefcase text-secondary"></i>
              </div>
              <div>
                <div class="flex flex-wrap justify-between mb-1">
                  <h4 class="text-lg font-medium text-gray-300">校团委新媒体技术部微信编辑部副部长</h4>
                  <span class="text-gray-400 text-sm">2023.09 - 2024.06</span>
                </div>
                <p class="text-gray-400 text-sm">
                  熟练掌握和运用推文制作排版工具，具有良好的沟通能力和组织协调能力。<!-- 需要修改 -->
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- 荣誉奖项 -->
        <div>
          <h3 class="text-xl font-semibold mb-4 text-accent flex items-center">
            <i class="fa fa-trophy mr-2"></i> 荣誉奖项
          </h3>

          <div class="bg-gray-700/50 rounded-lg p-4">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
                <i class="fa fa-star text-accent"></i>
              </div>
              <div>
                <h4 class="text-lg font-medium text-gray-300 mb-1">全国三维数字化创新设计大赛17周年精英联赛 · 一等奖</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="mb-12">
      <h2 class="text-2xl font-bold mb-8 bg-gradient-to-r from-primary to-secondary text-gradient inline-block">联系方式
      </h2>

      <div class="bg-gray-800/50 rounded-xl p-6">
        <h3 class="text-xl font-semibold mb-4 text-primary">基本信息</h3>
        <div class="space-y-4">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4">
              <i class="fa fa-phone text-primary"></i>
            </div>
            <div>
              <p class="text-gray-400 text-sm">电话</p>
              <p class="text-gray-300">133-1371-2976</p>
            </div>
          </div>

          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4">
              <i class="fa fa-envelope text-primary"></i>
            </div>
            <div>
              <p class="text-gray-400 text-sm">邮箱</p>
              <p class="text-gray-300">343724601@qq.com</p>
            </div>
          </div>

          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-4">
              <i class="fa fa-map-marker text-primary"></i>
            </div>
            <div>
              <p class="text-gray-400 text-sm">地址</p>
              <p class="text-gray-300">福建省宁德市福鼎市</p>
            </div>
          </div>
        </div>
      </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-900 py-8 border-t border-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <!-- 左侧：名字和版权信息 -->
        <div class="flex flex-col md:flex-row items-center mb-4 md:mb-0">
          <div class="flex items-center mr-4">
            <div
              class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-2">
              <span class="text-white font-bold">LX</span>
            </div>
            <span class="font-semibold text-xl">李秀如</span>
          </div>
          <p class="text-gray-400 text-sm md:ml-4">© 2025 李秀如. 保留所有权利.</p>
        </div>

        <!-- 右侧：社交媒体图标 -->
        <div class="flex space-x-6">
          <!-- GitHub -->
          <a href="https://github.com/rmlxh" target="_blank" rel="noopener noreferrer"
            class="text-gray-400 hover:text-primary transition-colors">
            <i class="fa fa-github text-xl"></i>
          </a>

          <!-- 微信 -->
          <div class="relative group">
            <a href="#" class="text-gray-400 hover:text-primary transition-colors cursor-pointer">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <div
              class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10">
              <div class="bg-white p-2 rounded-lg shadow-lg">
                <img src="images/wx.png" alt="微信二维码" class="w-499 h-499 object-cover">
                <div class="text-center mt-1 text-sm text-gray-800 whitespace-nowrap">微信扫一扫</div>
              </div>
              <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white rotate-45"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- 回到顶部按钮 -->
  <button id="back-to-top"
    class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/80">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- JavaScript -->
  <script>
    // 回到顶部按钮
    const backToTopButton = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      if (window.pageYOffset > 300) {
        backToTopButton.classList.remove('opacity-0', 'invisible');
        backToTopButton.classList.add('opacity-100', 'visible');
      } else {
        backToTopButton.classList.remove('opacity-100', 'visible');
        backToTopButton.classList.add('opacity-0', 'invisible');
      }
    });
    backToTopButton.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth'
          });
        }
      });
    });

    // 滚动显示动画
    function revealOnScroll() {
      const reveals = document.querySelectorAll('.reveal');
      const windowHeight = window.innerHeight;

      reveals.forEach(reveal => {
        const revealTop = reveal.getBoundingClientRect().top;
        const revealPoint = 150;

        if (revealTop < windowHeight - revealPoint) {
          reveal.classList.add('active');
        }
      });
    }

    window.addEventListener('scroll', revealOnScroll);
    window.addEventListener('load', revealOnScroll);
  </script>
</body>

</html>